<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="span" @click.native="onClick('/debug')">
        <el-card shadow="hover">
          <i class="el-icon-cpu" />
          <p>调试记录</p>
        </el-card>
      </el-col>
      <el-col :span="span" @click.native="onClick('/event')">
        <el-card shadow="hover">
          <i class="el-icon-truck" />
          <p>事件列表</p>
        </el-card>
      </el-col>
      <el-col :span="span" @click.native="onClick('/exception')">
        <el-card shadow="hover">
          <i class="el-icon-document-delete" />
          <p>错误日志</p>
        </el-card>
      </el-col>
      <el-col :span="span" @click.native="onClick('/addons')">
        <el-card shadow="hover">
          <i class="el-icon-goods" />
          <p>应用管理</p>
        </el-card>
      </el-col>
      <el-col :span="span" @click.native="onClick('/crud')">
        <el-card shadow="hover">
          <i class="el-icon-magic-stick" />
          <p>代码生成</p>
        </el-card>
      </el-col>
      <el-col :span="span" @click.native="$message.info('敬请期待')">
        <el-card shadow="hover">
          <i class="el-icon-lock" />
          <p>项目加密</p>
        </el-card>
      </el-col>
      <el-col :span="span" @click.native="$message.info('敬请期待')">
        <el-card shadow="hover">
          <i class="el-icon-mobile-phone" />
          <p>DIY创建</p>
        </el-card>
      </el-col>
      <el-col :span="span" @click.native="toUrl('http://doc.dkyx.cc')">
        <el-card shadow="hover">
          <i class="el-icon-document" />
          <p>文档中心</p>
        </el-card>
      </el-col>
      <el-col :span="span" @click.native="toUrl('http://www.dkyx.cc')">
        <el-card shadow="hover">
          <i class="el-icon-position" />
          <p>访问官网</p>
        </el-card>
      </el-col>
      <!--      <el-col :span="span" @click.native="toUrl('https://support.qq.com/products/365504')">-->
      <!--        <el-card shadow="hover">-->
      <!--          <i class="el-icon-chat-line-round" />-->
      <!--          <p>社区交流</p>-->
      <!--        </el-card>-->
      <!--      </el-col>-->
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'HomeAppList',
  props: {
    span: {
      default: 8,
      type: Number
    }
  },
  data() {
    return {
      open: window.open
    }
  },
  computed: {},
  mounted() {},
  methods: {
    onClick(router) {
      this.$router.push(router)
    },
    toUrl(url) {
      // 跳转提醒
      this.$confirm('即将跳转到外部网站，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          window.open(url)
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped lang="scss">
p {
  margin: 15px 0;
}
</style>
